<template>
<div>
    <div id="map"></div>
   <div>
      <button @click="openPolygonTool">多边形工具</button>
      <button @click="clearOverlays">清除所有</button>
    </div>
</div>

</template>

<script>
export default {
  data () {
    return {
      map: {},
      T: '',
      handler: null,
      polygonTool: null
    }
  },
  mounted () {
    this.load()
  },
  methods: {
    load () {
      const init = new Promise((resolve, reject) => {
        if (window.T) {
          console.log('地图初始化成功')
          resolve(window.T)
        }
      })
      init.then(T => {
        this.T = T
        this.map = new T.Map('map')
        this.map.centerAndZoom(new T.LngLat(120.51464106874174, 30.18507717526055), 16)
        const points = []
        points.push(new T.LngLat(120.5159587573058, 30.189271698799864))
        points.push(new T.LngLat(120.51570082708564, 30.188428145072393))
        points.push(new T.LngLat(120.51602111986398, 30.188314127001817))
        points.push(new T.LngLat(120.51569203014614, 30.187232841685518))
        points.push(new T.LngLat(120.52101203032011, 30.186358871282124))
        points.push(new T.LngLat(120.52178573043531, 30.189433470909407))
        points.push(new T.LngLat(120.51813833607245, 30.19010533055126))
        points.push(new T.LngLat(120.51651028777091, 30.1900164744359))
        points.push(new T.LngLat(120.51639463997586, 30.189878234181627))
        points.push(new T.LngLat(120.51625235188894, 30.189280198635245))
        points.push(new T.LngLat(120.5159587573058, 30.189271698799864))
        // 创建面对象
        const polygon = new T.Polygon(points, {
          color: 'blue', weight: 3, opacity: 0.5, fillColor: '#FFFFFF', fillOpacity: 0.5, test: '<p>名称：梅林村稻田1区</p><p>面积：295亩</p>'
        })
        const points2 = []
        points2.push(new T.LngLat(120.51284055789206, 30.182764423462757))
        points2.push(new T.LngLat(120.51364070621113, 30.182621646989077))
        points2.push(new T.LngLat(120.5136126436411, 30.182488571966434))
        points2.push(new T.LngLat(120.51411799719153, 30.18238726270192))
        points2.push(new T.LngLat(120.51380233098138, 30.18022229623628))
        points2.push(new T.LngLat(120.51319871460892, 30.180299152079485))
        points2.push(new T.LngLat(120.51312854147875, 30.180105518149357))
        points2.push(new T.LngLat(120.51225118277188, 30.180217837515734))
        points2.push(new T.LngLat(120.51284055789206, 30.182764423462757))
        // 创建面对象
        const polygon2 = new T.Polygon(points2, {
          color: 'blue', weight: 3, opacity: 0.5, fillColor: '#FFFFFF', fillOpacity: 0.5, test: '<p>名称：梅林村稻田5区</p><p>面积：254亩</p>'
        })
        // 向地图上添加面
        this.map.addOverLay(polygon)
        this.map.addOverLay(polygon2)

        const ctrl = new T.Control.MapType([
          // {
          //   title: '地图',
          //   icon: 'http://api.tianditu.gov.cn/v4.0/image/map/maptype/vector.png', // 地图控件上所要显示的图层图标（默认图标大小80x80）
          //   layer: window.TMAP_NORMAL_MAP
          // },
          {
            title: '卫星',
            icon: 'http://api.tianditu.gov.cn/v4.0/image/map/maptype/satellite.png',
            layer: window.TMAP_SATELLITE_MAP
          }])

        this.map.addControl(ctrl)
        polygon.addEventListener('click', this.getinfo)
        polygon2.addEventListener('click', this.getinfo)
      })
    },
    getinfo (e) {
      console.log(e)
      const T = this.T
      const that = this
      const p = e.target
      const lnglat = new T.LngLat(p.getCenter().lng, p.getCenter().lat)// 获取点击多边形中心经纬度
      const infoWin = new T.InfoWindow() // 创建信息窗口对象
      const Content = e.target.options.test // 设置信息窗口要显示的内容，此处可使用html代码;现在显示的就是之前在polygon实例中添加的数据
      infoWin.setContent(Content)// 信息窗口加入信息
      infoWin.setOffset(new T.Point(0, -30))// 设置信息窗口边距，第一个决定X方向，第二个决定Y方向
      infoWin.setLngLat(lnglat)// 设置信息窗口位置
      that.map.addOverLay(infoWin)// 向地图上添加信息窗口
    },

    openPolygonTool () {
      // const points = []// 存放坐标
      const T = this.T
      const config = {
        // showLabel: true,
        color: 'red',
        weight: 3,
        opacity: 0.5,
        fillColor: '#FFFFFF',
        fillOpacity: 0.5
      }
      if (this.handler) this.handler.close()
      this.handler = new T.PolygonTool(this.map, config)
      this.handler.open()
      // 圈地绘制
      this.handler.addEventListener('draw', this.getPoints)
      // this.map.addEventListener('click', function (p) {
      //   console.log(p)
      //   points.push(p.lnglat)
      //   console.log(points)
      // })
    },
    getPoints (e) {
      console.log(e)
      // 经纬度
      console.log(e.currentLnglats)
      // 面积
      console.log(e.currentArea)
      const acre = (e.currentArea * 0.0015).toFixed(2) + '亩'
      console.log(acre)
    },
    clearOverlays () {
      this.map.clearOverLays()
    }

  }
}
</script>
<style scoped>
#map {
    width: 85vw;
    height: 72vh;
}
</style>
